<template>
  <div class="dashboard-editor-container text-center">
    <el-row :gutter="8" class="split-container real-time-panel">
      <el-col :xs="24" :sm="24" :lg="2">
        实时数据：
      </el-col>
      <el-col :xs="24" :sm="24" :lg="22">
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="新注册会员">
            {{realTimeData.newUser || 0}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="总存款">
            {{realTimeData.rechargeTotal || 0  | currency}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="存款总人数">
            {{realTimeData.rechargeUser || 0}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="总出款">
            {{realTimeData.withdrawTotal || 0  | currency}}
            <!--{{realTimeData.totalWithdrawMoney | convert2yuan}}-->
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="出款总人数">
            {{realTimeData.withdrawUser || 0}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="红利">
            {{realTimeData.bonusTotal || 0  | currency}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="红利人数">
            {{realTimeData.bonusUser || 0}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="目前在线人数">
            {{realTimeData.onlineUser || 0}}
          </real-time-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="2">
          <real-time-card header="总输赢">
            {{realTimeData.profitTotal || 0  | currency}}
          </real-time-card>
        </el-col>
      </el-col>
    </el-row>

    <el-row :gutter="8" class="split-container reference-panel">
      <el-col :xs="24" :sm="24" :lg="2">
        参考数据：
      </el-col>
      <el-col :xs="24" :sm="24" :lg="22">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="rank-card">
            <div slot="header" class="clearfix">
              <span>今日存款前十</span>
            </div>

            <el-table
              :data="rechargeTop10"
              style="width: 100%">
              <el-table-column label="排名" align="center">
                <template slot-scope="{$index}">
                  {{$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="账号" align="center">
                <template slot-scope="{row}">
                  {{row.username}}
                </template>
              </el-table-column>
              <el-table-column label="次数" align="center">
                <template slot-scope="{row}">
                  {{row.count}}
                </template>
              </el-table-column>
              <el-table-column label="总额" align="center">
                <template slot-scope="{row}">
                  {{row.total | currency }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="rank-card">
            <div slot="header" class="clearfix">
              <span>今日提款前十</span>
            </div>
            <el-table
              :data="withdrawTop10"
              style="width: 100%">
              <el-table-column label="排名" align="center">
                <template slot-scope="{$index}">
                  {{$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="账号" align="center">
                <template slot-scope="{row}">
                  {{row.username}}
                </template>
              </el-table-column>
              <el-table-column label="次数" align="center">
                <template slot-scope="{row}">
                  {{row.count}}
                </template>
              </el-table-column>
              <el-table-column label="总额" align="center">
                <template slot-scope="{row}">
                  {{row.total  | currency}}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="rank-card">
            <div slot="header" class="clearfix">
              <span>今日盈利前十</span>
            </div>
            <el-table
              :data="profitTop10"
              style="width: 100%">
              <el-table-column label="排名" align="center">
                <template slot-scope="{$index}">
                  {{$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="账号" align="center">
                <template slot-scope="{row}">
                  {{row.username}}
                </template>
              </el-table-column>
              <el-table-column label="盈利额" align="center">
                <template slot-scope="{row}">
                  {{row.total  | currency}}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="rank-card">
            <div slot="header" class="clearfix">
              <span>今日亏损前十</span>
            </div>
            <el-table
              :data="lossTop10"
              style="width: 100%">
              <el-table-column label="排名" align="center">
                <template slot-scope="{$index}">
                  {{$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="账号" align="center">
                <template slot-scope="{row}">
                  {{row.username}}
                </template>
              </el-table-column>
              <el-table-column label="亏损额" align="center">
                <template slot-scope="{row}">
                  {{row.total  | currency}}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="rank-card">
            <div slot="header" class="clearfix">
              <span>今月数据总和</span>
            </div>
            <table
              class="el-table el-table__body-wrapper is-scrolling-left vertical-table"
              style="width: 100%">
              <tr>
                <th>
                  <div class="cell">注册人数</div>
                </th>
                <td>
                  {{monthlyData.newUser}}
                </td>
              </tr>
              <tr>
                <th>
                  <div class="cell">存款金额</div>
                </th>
                <td>
                  {{monthlyData.rechargeTotal  | currency }}
                </td>
              </tr>
              <tr>
                <th>
                  <div class="cell">存款人数</div>
                </th>
                <td>
                  {{monthlyData.rechargeUser}}
                </td>
              </tr>
              <tr>
                <th>
                  <div class="cell">提款金额</div>
                </th>
                <td>
                  {{monthlyData.withdrawTotal  | currency}}
                </td>
              </tr>
              <tr>
                <th>
                  <div class="cell">提款人数</div>
                </th>
                <td>
                  {{monthlyData.withdrawUser}}
                </td>
              </tr>
              <tr>
                <th>
                  <div class="cell">红利</div>
                </th>
                <td>
                  {{monthlyData.bonusTotal  | currency}}
                </td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-col>
    </el-row>

    <el-row :gutter="12" class="split-container">
      <el-card>
        <div slot="header" class="clearfix">
          <span>游戏平台投注量</span>
        </div>
        <daily-bar-chart
          :x-data="bettingData.date"
          :y-data="bettingData.data"
        ></daily-bar-chart>
      </el-card>
    </el-row>

    <el-row :gutter="12" class="split-container">
      <el-card>
        <div slot="header" class="clearfix">
          <span>游戏平台公司总输赢</span>
        </div>
        <daily-bar-chart
          :x-data="totalProfitData.date"
          :y-data="totalProfitData.data"
        ></daily-bar-chart>
        <!--<profit-bar-chart-->
          <!--:x-data="totalProfitData"-->
        <!--&gt;</profit-bar-chart>-->
      </el-card>
    </el-row>

  </div>
</template>

<script>

  import {
    dashboardRealTimeDataApi,
    dashboardRechargeTop10Api,
    dashboardWithdrawTop10Api,
    dashboardProfitTop10Api,
    dashboardLossTop10Api,
    dashboardMonthlyDataApi,
    dashboardBettingDataApi,
    dashboardProfitDataApi,
  } from '@/services/api/dashboard';

  import {form} from '@/build';

  import DailyBarChart from './components/DailyBarChart'
  import ProfitBarChart from './components/ProfitBarChart'

  export default {
    name: 'dashboard-admin',
    components: {
      DailyBarChart,
      ProfitBarChart,

      'real-time-card': {
        props: ['header'],
        render(h) {
          return ( <el-card
          header = {this.header
        }>
          {
            this.$slots.default
          }
        </el-card>)
        }
      }
    },

    mixins: [form],

    data() {
      return {
        realTimeData: {},
        rechargeTop10: [],
        withdrawTop10: [],
        profitTop10: [],
        lossTop10: [],
        monthlyData: [],
        bettingData: {
          date: [],
          data: []
        },
        totalProfitData: []
      }
    },
    methods: {},

    mounted() {
      this.bindGet(dashboardRealTimeDataApi, 'realTimeData', {
        format: data => {
          return data ? data : {}
        }
      });
      this.bindGet(dashboardRechargeTop10Api, 'rechargeTop10', {
        sendingData: {num: 10},
        format: data =>{
          if(data.length == 1 && data[0].total==0){
            return []
          }
          return data
        }
      });
      this.bindGet(dashboardWithdrawTop10Api, 'withdrawTop10', {
        sendingData: {num: 10},
        format: data =>{
          if(data.length == 1 && data[0].total==0){
            return []
          }
          return data
        }
      });
      this.bindGet(dashboardProfitTop10Api, 'profitTop10', {
        sendingData: {num: 10},
        format: data =>{
          if(data.length == 1 && data[0].total==0){
            return []
          }
          return data
        }
      });
      this.bindGet(dashboardLossTop10Api, 'lossTop10', {
        sendingData: {num: 10},
        format: data =>{
          if(data.length == 1 && data[0].total==0){
            return []
          }
          return data
        }
      });
      this.bindGet(dashboardMonthlyDataApi, 'monthlyData', {});


      this.bindGet(dashboardBettingDataApi, 'bettingData', {
        format: data => {
          let _data = [];
          const {dateList, agFishList, agRealList, ebetList, ptList, xj188List} = data;
          _.map(dateList, (item, index) => {
            _data[index] = [
              {
                title: 'AG捕鱼',
                value: agFishList[index]
              },
              {
                title: 'AG真人',
                value: agRealList[index]
              },
              {
                title: '贝博体育',
                value: xj188List[index]
              },
              {
                title: 'eBET真人',
                value: ebetList[index]
              },
              {
                title: 'PT电子',
                value: ptList[index]
              }
            ]
          });
          return {date: dateList, data: _data}
        }
      });
      this.bindGet(dashboardProfitDataApi, 'totalProfitData',{
        format: data => {
          let _data = [];
          const {dateList, agFishList, agRealList, ebetList, ptList, xj188List} = data;
          _.map(dateList, (item, index) => {
            _data[index] = [
              {
                title: 'AG捕鱼',
                value: agFishList[index]
              },
              {
                title: 'AG真人',
                value: agRealList[index]
              },
              {
                title: '贝博体育',
                value: xj188List[index]
              },
              {
                title: 'eBET真人',
                value: ebetList[index]
              },
              {
                title: 'PT电子',
                value: ptList[index]
              }
            ]
          });
          return {date: dateList, data: _data}
        }
      });


      this.getAll();
    }

  }
</script>

<style lang="scss">
  .dashboard-editor-container {
    padding: 22px;
    background-color: rgb(240, 242, 245);
    font-size: 12px;
    .split-container {
      margin-bottom: 12px;
    }
    .real-time-panel {
      .el-card__header, .el-card__body {
        padding: 10px 0;
      }
    }

    .reference-panel {
      .el-card__body {
        padding: 0;
        font-size: 12px;
      }
      .el-table--medium td {
        padding: 6px 0;
        font-size: 12px;
      }
    }

    .vertical-table {
      .el-card__body {
        padding: 0;
        font-size: 12px;
      }
      .el-table--medium td {
        padding: 6px 0;
        font-size: 12px;
      }

      th {
        border-bottom: 1px solid #ebeef5;
      }
    }
    .cell {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .rank-card{
      height: 460px;
      margin: 0 0 20px;
    }

    /*.chart-wrapper {*/
    /*background: #ffffff;*/
    /*padding: 16px 16px 0;*/
    /*margin-bottom: 32px;*/
    /*}*/
  }
</style>
